<template>
	<view class="content" style="height: 1000upx;">
		<base-headers/>
		<!-- 头部图片 -->
		<view class="header-img">
			<image src="/static/p18.jpg" style="width: 704upx;height: 423upx;border-radius: 12upx"></image>
		</view>
		<!-- 全民投票 -->
		<view class="main" >
			<view class="main-title">
				全民投票
			</view>
			<view class="main-vote" v-for="item in mainVoteData" style="margin-bottom: 40upx;">
				<view class="main-vote-left">
					<image src="../../static/p19.jpg" mode="" style="width: 242upx;height: 196upx; border-radius: 6upx;"></image>
				</view>
				<view class="main-vote-right">
					<view class="main-right-header">
						<view class="mright-header-icon" :class="item.id==1?'icon-one':(item.id==4?'icon-three':'icon-two')">
							{{item.id}}
						</view>
						<view class="mright-header-name">
							{{item.name}}
						</view>
						<view class="mright-header-vote">
							{{item.num}} <text style="font-size: 24upx;font-family: Noto Sans S Chinese;font-weight: bold;color: #272727;">票</text>
						</view>
					</view>
					<view class="main-right-text">
							{{item.text}}
					</view>
					
					<view style="width: 100%; text-align: right;">
						<button type="primary" size="mini" :class="item.state?'main-right-button-selected ':'main-right-button'" 
						@click="changeBtn(item.state,item.id)" :disabled="item.state">{{item.state?'已投票':'投票'}}</button>
					</view>
					
					
				</view>
			</view>
			
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mainVoteData:[
					{
						id:1,
						name:'刘敏蓉',
						text:'简介：福州大学刘敏榕工作室负责人兼党支部书记、图书馆馆长，高校国家知识产权信息服务中心主任，研究馆员，福建省高校图书馆工作委员会副主任。',
						num: 2341,
						state:false,
						class:'icon-one'
					},
					{
						id:2,
						name:'傅小雨',
						text:'简介：傅晓宇，2019年毕业于福建师范大学学科教学（数学专业），研究生学历。',
						num: 1999,
						state:false,
						class:'icon-two'
					},
					{
						id:3,
						name:'张年雄',
						text:'简介：张年雄，男，中共党员，中学数学高级教师，鼓楼区人大代表，福建省“十三五”中小学名校长培养对象，福建省初等数学学会理事。',
						num: 1200,
						state:true,
						class:'icon-two'
					},
					{
						id:4,
						name:'陈维',
						text:'简介：陈维,本科毕业,一级语文教师。现任福州市东升小学语文教师，秉承“学高为师，德高为范”的道理全身心地投入一线教育工作。',
						num: 896,
						state:false,
						class:'icon-three'
					},
				]
			}
		},

		
		methods: {
			changeBtn(state,id){
				console.log(this.mainVoteData[id-1].state);
				this.mainVoteData[id-1].state=!state
				this.mainVoteData[id-1].num=this.mainVoteData[id-1].num +1
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 头部图片
	
.content {
	display: flex;
	flex-direction: column;
	.header-img {
		width: 704upx;
		margin-left: 25upx;
		margin-top: 40upx;
		padding-right: 25upx;
	}
	
	.main {
		width: 704upx;
		margin-left: 25upx;
		margin-top: 30upx;
		position: relative;
		height: 300upx;
		
		.main-title {
			font-size: 34upx;
			font-family: Noto Sans S Chinese;
			font-weight: bold;
			color: #272727;
			margin-bottom: 30upx;
		}
		.main-vote {
			display: flex;
			border-bottom: 1px solid #F4F4F4;
			padding-bottom: 10upx;
			.main-vote-left {
				width: 242upx;
				height: 196upx;
				margin-right: 20upx;
			}
			.main-vote-right {
			
				display: flex;
				flex-direction: column;
				position: relative;
				width: 433upx;
				height: 300upx;
				box-sizing: border-box;
				.main-right-header {
						display: flex;
						justify-content: space-between;
						margin-bottom: 20upx;
						.mright-header-icon {
							width: 29upx;
							height: 33upx;
							font-size: 24upx;
							font-family: Noto Sans S Chinese;
							font-weight: bold;
							color: #FFFFFF;
							
							text-align: center;
							line-height: 33upx;
						}
						.icon-one {
							background:linear-gradient(-40deg, #FDCD1C 0%, #FFF1AC 100%);
						}
						.icon-two {
							background: linear-gradient(-40deg, #80808F 0%, #CECED5 100%);
						}
						.icon-three {
							background-color: #FBF2F4;
						}
					
						
						.mright-header-name {
							font-size: 34upx;
							font-family: Noto Sans S Chinese;
							font-weight: bold;
							color: #272727;	
							margin-right: 150upx;
							line-height: 32upx;
						}
						.mright-header-vote {
							font-size: 40upx;
							font-family: DIN Condensed;
							font-weight: bold;
							color: #BA0825;
							line-height: 32upx;
						}
				}
				.main-right-text {
					font-size: 23upx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #808080;
				}
				.main-right-button {		
					width: 227upx;
					height: 52upx;
					line-height: 52upx;
					position: absolute;
					bottom: 10upx;
					right: 0;
					background: #BA0825;
					border-radius: 26px;
				}
				.main-right-button-selected {
					width: 227upx;
					height: 52upx;
					line-height: 52upx;
					position: absolute;
					bottom: 10upx;
					right: 0;
					border-radius: 26px;
					background: #B5B5B5;
				}
			}
		}
		
	}
}

</style>
